tailwindをCSS Modulesと組み合わせる

Whatever you do, don’t use @apply just to make things look “cleaner”.

tailwindcssのユーティリティはプロトタイピングでガチャガチャやるにはいいんだが、複雑になってくるとプレフィックスの処理による辛さが出てくるので、CSS Modulesと組み合わせると便利という話

@applyでユーティリティを(プレフィックスが付いていようと)適用できるので、それを駆使してやっていく

@screenディレクティブを使うとtailwindcssのもつスクリーン幅を使ったメディアクエリを適用できる

現状ダークモードをサポートするディレクティブは存在しない(なぜ?)ので、

darkMode: "media"なら@media(prefers-color-scheme: dark) { .selector {...} }

darkMode: "class"なら:global(.dark) .selector {...}

みたいに書く